<template>
  <div class="agent_page">
    <div class="agent_header_box">
      <div class="agent_img_box">
        <img src="@/assets/images/icon/intra.png" />
      </div>
      <div class="agent_list">
        {{ webTitle }}
        <span
          v-if="
            route.query.serviceType && route.query.serviceType != 'Yprocess'
          "
          >(待处理{{ serviceName }})</span
        >
      </div>
    </div>
    <div class="agent_comment">
      <div class="agent_comment_box">
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item prop="title">
            <el-input
              style="width: 205px"
              v-model.trim="queryParams.title"
              placeholder="请输入标题"
              clearable
              @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item prop="readFlag">
            <el-select
              v-model="queryParams.readFlag"
              placeholder="未读标志"
              style="width: 120px"
            >
              <el-option
                v-for="(dict, index) in readFlagList"
                :key="index"
                :label="dict.name"
                :value="dict.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="serviceType">
            <el-select
              v-model="queryParams.serviceType"
              placeholder="业务类型"
              style="width: 120px"
            >
              <el-option
                v-for="(dict, index) in sys_service_type"
                :key="index"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="handleFlag">
            <el-select
              v-model="queryParams.handleFlag"
              clearable
              style="width: 120px"
            >
              <el-option label="待处理" value="0"></el-option>
              <el-option label="已处理" value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              align="right"
              unlink-panels
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              style="width: 270px"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button @click="readClick" icon="Check">一键设置已办</el-button>
          </el-form-item>
        </el-form>
        <el-table
          v-loading="loading"
          :data="tableList"
          @row-click="rowClick"
          @selection-change="selectRow"
          style="margin-top: 16px; width: 100%; margin-bottom: 20px"
        >
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column label="" align="center" width="80">
            <template #default="scope">
              <div>
                <span class="read_icon">
                  <img
                    v-if="scope.row.readFlag == 'Y'"
                    src="@/assets/images/icon/read.png"
                  />
                  <img v-else src="@/assets/images/icon/unread.png" />
                </span>
                <!-- <span class="urg_icon">
                  <img
                    v-if="scope.row.urgFlag == '1'"
                    src="@/assets/images/icon/urg.png"
                  />
                </span> -->
                <!-- <span class="urg_icon">
                  <img
                    v-if="scope.row.impSign == '1'"
                    src="@/assets/images/icon/imp.png"
                  />
                </span> -->
                <span class="urg_icon">
                  <img
                    v-if="scope.row.impSign == '0' || scope.row.impSign == '1'"
                    src="@/assets/images/icon/ban.png"
                  />
                  <img
                    v-else-if="scope.row.impSign == '2'"
                    src="@/assets/images/icon/yue.png"
                  />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="标题" align="left">
            <template #default="scope">
              <span style="float: left"> {{ scope.row.title }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="状态"
            prop="readFlag"
            align="center"
            width="150"
          >
            <template #default="scope">
              <span
                style="font-family: '微软雅黑', sans-serif; margin-right: 5px"
                :class="scope.row.readFlag == 'Y' ? 'Y-color' : 'N-color'"
                >●</span
              >
              <span>{{ scope.row.readFlag == 'Y' ? '已读' : '未读' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="业务类型"
            prop="serviceType"
            align="center"
            width="150"
          >
            <template #default="scope">
              <span>{{
                sys_service_type.find(
                  item => item.value == scope.row.serviceType
                )
                  ? sys_service_type.find(
                      item => item.value == scope.row.serviceType
                    ).label
                  : ''
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="发送时间" align="center" width="240">
            <template #default="scope">
              <div>{{ scope.row.sendTime }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="发送人"
            prop="sender"
            align="center"
            width="160"
          />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <detailForm
      v-if="isDetail"
      :rowId="rowId"
      :titleMessage="titleMessage"
      @closeDialog="closeDialog"
    ></detailForm>
  </div>
</template>
<script setup name="agent">
import {
  getTodoMessageList,
  getTodoMessageRead,
  handelSomeMsg
} from '@/api/businessSettings/agent'
import detailForm from './detail.vue'
import { useRouter } from 'vue-router'
import { computed, getCurrentInstance, reactive, toRefs } from 'vue'
const { proxy } = getCurrentInstance()

const router = useRouter()
const route = useRoute()
const data = reactive({
  titleMessage: null,
  ids: [],
  rowId: '',
  isDetail: false,
  loading: false,
  tableList: [],
  // 总条数
  total: 0,
  // 日期范围
  dateRange: [],
  queryParams: {
    title: undefined,
    readFlag: undefined,
    serviceType: undefined,
    handleFlag: '0',
    sendTime: [],
    pageNum: 1,
    pageSize: 10
  },
  readFlagList: [
    {
      id: '',
      name: '全部'
    },
    {
      id: 'Y',
      name: '已读'
    },
    {
      id: 'N',
      name: '未读'
    }
  ],
  pickerOptions: {
    shortcuts: [
      {
        text: '最近一周',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          picker.$emit('pick', [start, end])
        }
      },
      {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          picker.$emit('pick', [start, end])
        }
      }
    ]
  }
})
const {
  queryParams,
  readFlagList,
  pickerOptions,
  loading,
  tableList,
  total,
  dateRange,
  isDetail,
  rowId,
  titleMessage,
  ids
} = toRefs(data)
// 字典 具体查看根目录DICT.md文件
const { sys_service_type, sys_urg_flag, sys_imp_sign } = proxy.useDict(
  'sys_service_type',
  'sys_urg_flag',
  'sys_imp_sign'
)

// watch(
//   route.query.serviceType,
//   val => {
//     debugger
//     if (val) {
//       queryParams.value.serviceType = val
//     }
//   },
//   { immediate: true }
// )
const webTitle = ref('待办事宜')
const serviceName = computed(() => {
  let label = ''
  sys_service_type.value.forEach(item => {
    if (item.value == route.query.serviceType) {
      label = item.label
    }
  })
  return label
})
async function init() {
  console.log(route, 'query')
  if (route.query.serviceType === 'Yprocess') {
    webTitle.value = '待办事宜（待审批流程）'
    queryParams.value.businessId = route.query.serviceType
  } else {
    queryParams.value.serviceType = route.query.serviceType
  }
  await getList()
}
init()
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = []
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    handleFlag: '0'
  }
  getList()
}
//单击事件
function clickRow(row) {
  isDetail.value = true
  rowId.value = row.id
}
function rowClick(row) {
  if (row.type == 1) {
    let str = row.url.split('?')
    let urlName = []
    urlName = str[1] ? str[1].split('&') : ''
    console.log('urlName', urlName)
    let urlLink = {}
    for (var i = 0; i < urlName.length; i++) {
      urlLink[urlName[i].split('=')[0]] = urlName[i].split('=')[1]
    }
    router.push({
      path: `/${str[0]}/`,
      query: urlLink
    })

    ids.value.push(row.id)
    getTodoMessageRead({ ids: ids.value }).then(res => {})
  } else {
    isDetail.value = true
    rowId.value = row.id
    titleMessage.value = row.titleMessage
  }
}

function clickItem(row) {}
function closeDialog() {
  isDetail.value = false
  getList()
}
function getList() {
  loading.value = true
  getTodoMessageList({
    ...queryParams.value,
    beginDate: dateRange.value.length == 0 ? '' : dateRange.value[0],
    endDate: dateRange.value.length == 0 ? '' : dateRange.value[1]
  }).then(res => {
    if (res.code == 200) {
      loading.value = false
      tableList.value = res.rows
      total.value = res.total
    }
  })
}

// 一键已读
const selections = ref([])
function selectRow(rows) {
  selections.value = rows
  console.log(rows, 'rows')
}

function readClick() {
  if (selections.value.length == 0) {
    proxy.$modal.msgError('请选择要操作的数据')
    return
  }
  proxy.$modal.confirm('是否确认操作选中的数据项？').then(() => {
    let ids = []
    selections.value.forEach(item => {
      ids.push(item.id)
    })
    handelSomeMsg(ids.toString()).then(res => {
      if (res.code == 200) {
        proxy.$modal.msgSuccess('操作成功')
        getList()
      }
    })
  })
}
</script>
<style lang="scss" scoped>
.agent_page {
  display: block;
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  :deep .el-form--inline .el-form-item {
    margin-right: 20px;
  }
  :deep .pagination-container .el-pagination {
    right: 50px;
  }
  :deep .el-table__row {
    cursor: pointer;
  }
  .Y-color {
    color: #4bd863;
  }
  .N-color {
    color: #f59a23;
  }
  .read_icon {
    width: 24px;
    float: left;
    img {
      width: 24px;
      height: 20px;
    }
  }
  .urg_icon {
    float: left;
    margin: 0 6px;
    img {
      width: 18px;
      height: 16px;
      margin-top: 2px;
    }
  }
  .agent_header_box {
    align-items: center;
    width: 100%;
    height: 52px;
    display: inline-block;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
    border: none;
    -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 3px 5px rgb(0 0 0 / 0.05);
    box-shadow: 0px 3px 5px rgb(0 0 0 / 0.05);
    vertical-align: middle;
    background: #fff;
    // width: calc(100% - 200px);
    position: fixed;
    z-index: 9;

    .agent_img_box {
      width: 64px;
      float: left;
      img {
        width: 38px;
        height: 38px;
        float: left;
        margin: 6px 0 0 16px;
      }
    }

    .agent_list {
      width: 100%;
      font-weight: 600;
      line-height: 50px;
    }
  }
  .agent_comment {
    padding: 80px 24px 24px 24px;
    display: block;

    .agent_comment_box {
      background: #fff;
      padding: 24px 12px 24px 24px;
      display: block;
      border-radius: 10px;
      -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
      -webkit-box-shadow: 0px 0px 5px rgb(0 0 0 / 0.15);
      box-shadow: 0px 0px 5px rgb(0 0 0 / 0.15);
    }
  }
}
</style>
